/**
 * [生成主题颜色]
 * @param  {[Object]} theme       [主题颜色对象]
 * @param  {[Object]} configStyle [配置的需要修改的css]
 * @param  {[String]} site        [当前站点名称]
 * 原理：根据异步获取到的主题颜色，结合配置中的颜色配置，来生成JS无法直接改变的颜色样式
 */

import Color from 'color'

export default function (theme, configStyle, site) {
  const primaryColor = theme['brand-primary']
  const themeKeys = Object.keys(theme)
  const themeName = 'theme-' + site + '-' + primaryColor.replace('#', '')

  let themeRes = []

  themeKeys.forEach(v => {
    let colorValue = theme[v]
    // 如果配置中存在该主题色的样式配置
    if (configStyle[v]) {
      let cls, props
      // 拼接css
      let res = configStyle[v].map(v => {
        // 加上主题名称，便于提升权重
        cls = '.' + themeName + ' ' + v.cls
        props = Object.keys(v.props).reduce((prev, next) => {
          let light = v.props[next]
          let c

          // 颜色加深、减淡 或 使用原色
          if (light === 0) {
            c = colorValue
          } else if (light > 0) {
            c = Color(colorValue).darken(light).rgb().string()
          } else {
            c = Color(colorValue).lighten(Math.abs(light)).rgb().string()
          }
          prev.push(next + ':' + c + ';')

          return prev
        }, ['{']).join('') + '}'
        return cls + props
      })
      themeRes = themeRes.concat(res)
    }
  })

  const cssTxt = themeRes.join('\n')

  document.body.classList.add(themeName)

  const tag = document.getElementById('#' + themeName)

  if (!tag) {
    let styleNode = document.createElement('style')
    styleNode.id = themeName
    styleNode.type = 'text/css'
    styleNode.innerHTML = cssTxt
    document.getElementsByTagName('head')[0].appendChild(styleNode)
  } else {
    tag.innerHTML = cssTxt
  }
}
